<template>
	<el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize" :with-header="false"
		:close-on-click-modal="true">
		<template #default>
			<div class="delete-container">
				<el-icon class="zs-space-bottom-bg confirm-icon">
					<CircleCheckFilled />
				</el-icon>
				<div class="zs-title-bg zs-space-bottom-bg">{{ delTitle }}</div>
				<div class="zs-text-gray delete-des">{{ delTipMes }}</div>
				<el-select class="zs-select-md zs-space-top" v-if="postList.length > 1" v-model="curPost"
					:placeholder="'请选择岗位'">
					<el-option v-for="(item, index) in postList" :key="index" :label="item.fd_postname"
						:value="item.fd_postid" />
				</el-select>
				<div class="delete-footer">
					<el-button class="zs-btn-md zs-btn-plain" @click="cancelClick">取消</el-button>
					<el-button class="zs-btn-md zs-btn-primary" @click="confirmClick" :disabled="!isFinish">确定</el-button>
				</div>
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
import { getPersonPost } from "@/api/public";
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus'
const props = defineProps({
	curDrawerSize: { type: String, default: '400px' },
	isShow: { type: Boolean, default: false },
	delTitle: { type: String, default: '是否确认提交' },
	delTipMes: { type: String, default: '确认后触发审核流程，审核过程中无法再次进行编辑' },
});
const emit = defineEmits(['close']);

const isShowDrawer = ref(props.isShow);
const isFinish = ref(false)
const curPost = ref('')
const postList = ref([])

watch(
	() => props.isShow,
	newVal => {
		isShowDrawer.value = newVal;
	},
);

const getPersonPostList = () => {
	getPersonPost().then((res) => {
		isFinish.value = true
		postList.value = res.data.data
	});
}

getPersonPostList()

const handleClose = done => {
	emit('close', { isShow: false, isSuccess: false });
	done();
};
function cancelClick() {
	isShowDrawer.value = false;
	emit('close', { isShow: false, isSuccess: false });
}
function confirmClick() {
	if (postList.value.length > 1 && curPost.value.length == 0) {
		ElMessage({
			message: '请选择岗位',
			type: 'warning',
		})
		return false
	}
	isShowDrawer.value = false;
	emit('close', { isShow: false, isSuccess: true, fdPostId: curPost.value });
}
</script>

<style scoped lang="scss">
.delete-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.delete-des {
	max-width: 500px;
	line-height: 22px;
}

.confirm-icon {
	font-size: 70px;
	color: rgb(249, 164, 7);
}

.delete-footer {
	margin-top: 70px;
	margin-bottom: 120px;
}
</style>
